<template>
  <div class="box">
    <!-- <h5>实习状态/信息</h5> -->
    <div class="child-box">
      <div class="a">
        <div class="left">
          <span><b>实习岗位：</b>{{ data.zhiwei }}</span>
          <span><b>实习单位：</b>{{ data.company }}</span>
          <span><b>辅导员：</b>{{ data.teacher }}</span>
        </div>
        <div class="right">
          <span><b>实习地点：</b>{{ data.where }}</span>
          <span><b>详细地址：</b>{{ data.detailWhere }}</span>
          <span><b>校外指导老师：</b>{{ data.outsideTeacher }}</span>
        </div>
      </div>
      <div class="b">
        <span><b>实习时间：</b>{{ data.startDate }}至{{ data.endDate }}</span>
        <span><b>实习状态：</b>实习已结束</span>
        <span><b>校内指导老师：</b>{{ data.insideTeacher }}</span>
      </div>
    </div>

    <div id="carouselExampleIndicators" class="carousel slide">
      <div class="carousel-indicators">
        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
      </div>
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="@/assets/imgs/banner_one.jpg" class="d-block" alt="...">
        </div>
        <div class="carousel-item">
          <img src="@/assets/imgs/banner_two.jpg" class="d-block" alt="...">
        </div>
      </div>
      <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
      </button>
      <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </button>
    </div>
  </div>
  


</template>

<script setup>
import { reactive } from "vue";
import API from "../assets/js/axios.js"
import axios from "axios";

//引入store钩子
import useCounterStore from '@/stores/counter.js'
//实现仓库数据双向绑定
import {storeToRefs} from 'pinia'

//创建仓库对象
const store=useCounterStore()
let {timeData}=storeToRefs(store)


const data = reactive({
  startDate: "未知",
  endDate: "未知",

  where: "",
  detailWhere: "",
  zhiwei: "",
  type: "",
  money: "",
  duikou: "",
  outsideTeacher: "",
  insideTeacher: "",
  company: "",
  teacher: ""

})

const getData = ()=> {
  axios.get(`http://127.0.0.1:9001/test/shixi_message.php?id=${localStorage.getItem("token")}`).then(re=> {
    console.log(re.data);

    let item = re.data[0]

    data.startDate = item.start_date.date.slice(0,10)
    data.endDate = item.end_date.date.slice(0,10)
    data.where = item.where
    data.detailWhere = item.detail_where
    data.zhiwei = item.zhiwei
    data.type = item.type
    data.duikou = item.duikou
    data.outsideTeacher = item.outside_teacher
    data.insideTeacher = item.inside_teacher
    data.company = item.company
    data.teacher = item.teacher

  }).catch(e=> {
    console.log(e);
  })


}

// const getTime =()=> {
//     axios.get('http://127.0.0.1:9001/test/time.php', {
//       params: {
//         "name": localStorage.getItem("token")
//       }
//     }).then(re=> {
//       console.log(re.data[0]);
//       let item = re.data[0]
//       data.startDate = item.start_date.date.slice(0,10)
//       data.endDate = item.end_date.date.slice(0,10)
//     }).catch(e=> {
//       console.log(e);
//     })
  // API({
  //   headers: {
  //     "Access-Control-Allow-Origin" : "*",
  //   },
  //   // data: {
  //   //   "name": "xiaomin"
  //   // },
  //   url:'http://127.0.0.1:9001/test/time.php',
  //   method:'GET'
  // }).then((res)=>{
  //   console.log(res.data)
  //   // for(let item of res.data) {
  //   //   if (item.snum.includes(localStorage.getItem("token"))) {
  //   //     timeData.startDate = item.start_date.date.slice(0,10)
  //   //     timeData.endDate = item.end_date.date.slice(0,10)
  //   //     console.log(timeData.startDate);
  //   //   }
  //   // }
  // }).catch((e)=>{
  //   console.log(e);
  // });
// }
getData()



</script>

<style scoped>
/* h5 {
  font-weight: 700;
  margin-top: 10px;
} */
#carouselExampleIndicators {
  /* width: fit-content; */
  background: #fff;
  padding: 20px 10px;
  margin-top: 20px;
  border-radius: 10px;
}
.carousel-control-prev,
.carousel-control-next {
  filter: invert(1) grayscale(100);
}
.carousel-inner {
  max-width: 600px;
  margin: 0 auto;
}
.carousel-inner img {
  width: 100%;
  height: auto;
}
.box {
  width: 95%;
  margin: 0 auto;
}
.box .a {
  display: flex;
}
.box .a div:nth-child(2) {
  margin-left: 50px;
}
.child-box {
  display: flex;
  flex-direction: column;
}
.child-box>div {
  width: 100%;
  background: #fff;
  border-radius: 10px;
  padding: 15px;
  margin-top: 10px;
}
.box span {
  display: block;
}
@media (max-width: 767px) {
  .box .a {
    flex-direction: column;
    /* align-items: center; */
  }
  .box .a div:nth-child(2) {
    margin-left: 0;
  }
}
</style>